<!--
 * @FileDescription: this is my vue
 * @Author: zhuxin xu
 * @Date: 2023-01-30 10:05:23
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2023-06-07 20:19:32
-->
<template>
  <div class="box" style="--width:400px;--height:200px">
    <div @click="leftpoint" class="leftpoint el-icon-arrow-left"></div>
    <div @click="rightpoint" class="rightpoint el-icon-arrow-right"></div>
    <div class="point"  >
    <div class="firstpoint active" @click="clickactive($event,1)"></div>
    <div class="firstpoint" @click="clickactive($event,2)"></div>
    <div class="firstpoint" @click="clickactive($event,3)"></div>
  </div>
  <div class="js fadeOut" ref="centerbox">
    <div class="copelunbo3"><img src="@/assets/pic/3.webp" alt=""></div>
    <div class="lunbo1" ><img src="@/assets/pic/1.jpg" alt=""></div>
    <div class="lunbo2"><img src="@/assets/pic/2.webp" alt=""></div>
    <div class="lunbo3"><img src="@/assets/pic/3.webp" alt=""></div>
    <div class="copelunbo1"><img src="@/assets/pic/1.jpg" alt=""></div>
  </div>
</div>
</template>
<script>

// mvvm原理以及Object.defineProperty()方法的使用
export default {
  data(){
    return{
      index:1
    }
  },
  methods: {
    // 点击激活
    clickactive(event,n){
      this.$refs.centerbox.style.transitionDuration='1s'
      // console.log(document.querySelectorAll('.firstpoint'));
      // this.$refs.activecolor.classList.remove('active')
      document.querySelectorAll('.firstpoint').forEach(item=>{
        item.classList.remove('active')
      })
      event.target.classList.add('active')
      this.index = n
      this.$refs.centerbox.style.left = ((this.index) * -400) + 'px'
    },
    // 向左滑动
    leftpoint(){
      this.$refs.centerbox.style.transitionDuration='1s'
      // console.log(this.$refs.centerbox.style);
     if(this.index>0 && this.index<=4){
      this.index--
       this.$refs.centerbox.style.left = (this.index * -400) + 'px'
       if(this.index==0){
       setTimeout(() => {
        this.index=3
        this.$refs.centerbox.style.left = (this.index * -400) + 'px'
        this.$refs.centerbox.style.transitionDuration='0s'
        // console.log(this.index,'dskdjksd');
       }, 1000);
      }
      //  console.log(this.index);
       document.querySelectorAll('.firstpoint').forEach(item=>{
        item.classList.remove('active')
      })
      if(this.index==0){
        this.index=3
        document.querySelectorAll('.firstpoint')[this.index-1].classList.add('active')
      }else{
        document.querySelectorAll('.firstpoint')[this.index-1].classList.add('active')
      }
     }else{
      return false
     }
    },
    // 向右滑动
    rightpoint(){
      this.$refs.centerbox.style.transitionDuration='1s'
     if(this.index>=0 && this.index<4){
      this.index++
       this.$refs.centerbox.style.left = (this.index * -400) + 'px'
      //  console.log(this.index);
       document.querySelectorAll('.firstpoint').forEach(item=>{
        item.classList.remove('active')
      })
      if(this.index==4){
      setTimeout(()=>{
        this.index=1
        this.$refs.centerbox.style.left = (this.index * -400) + 'px'
        this.$refs.centerbox.style.transitionDuration='0s'
    },1000)
  }
    if(this.index==4){
      this.index=1
      document.querySelectorAll('.firstpoint')[this.index-1].classList.add('active')
    }else{
      document.querySelectorAll('.firstpoint')[this.index-1].classList.add('active')
    }
     }else{
      return false
     }
    },
    js(){
          // const name = prompt('请输入姓名') || null
          // const sex = prompt('请输入性别') || null
          // const age = prompt('请输入你的出生年龄') || null
          // alert(`
          //        你的姓名为：${name}
          //        你的性别为：${sex}
          //        你的年龄为：${age}
          //      `)
          // var firut = prompt('请输入水果')
          // switch(firut){
          //   case'苹果':
          //   alert('苹果的价格是 3/斤')
          //   break;
          //   default:alert('没有水果价格')
          //   break;
          // }
          // const grand = prompt('请输入班级人数')
          // for(var i = 1 ;i<=grand;i++){
          //  prompt('请输入第'+ i + '学生')
          // }
          // 九九乘法表
          // var str = ''
          //   for (var i = 9 ; i>=1; i--){
          //     for(var j =1; j<=i; j++){
          //       str += i + 'x' + j  + '=' + i*j + '\t'
          //     }
          //     str +='\n'
          //   }
          //   console.log(str);
          //去数组中最大的值
          // var arr = [100,343,32,54,6,7,78,342]
          // var max = 0
          // arr.forEach(item=>{
          //   if(max<item){
          //       max = item
          //   }
          // })
          // console.log(max);
          //数组转字符串 join()
          // var arr  = ['dsf',2,4,5,65,6,'hdsfjk']
          // var str = arr.join('')
          // console.log(str);
          //数组去重 filter indexof
          // var arr = [1,1,1,3,4,55,6,34,34,3,2,2,34,4]
          // var newArr = arr.filter((item,index)=>{
          //   return arr.indexOf(item) == index
          // })
          // console.log(newArr);
          //数组翻转 reverse
          // var arr = [1,2,3,4,5]
          // var newArr = arr.reverse()
          // console.log(newArr);
          //数组排序 sort() a-b从大到小 b-a从小到大
          // var arr = [2,334,53,32,224,1,54,545]
          // var newArr = arr.sort((a,b)=>{
          //   return a-b
          // })1
          // console.log(newArr);
          //函数的使用方法
          // function sum(n){
          //   var Sum = 0
          //   for(var i = n;i<100;i++){
          //     Sum = Sum + i
          //   }
          //  return Sum
          // }
          // sum(99)
          // arguments存储了所有的实参 是一个伪数组 没有数组的一些方法 只有函数才有
          // function fn(){
          //   console.log(arguments);
          // }
          // fn(1,2,3)
          // 求任意个数的最大值
          // function getMax(){
          //   var num = 0
          //   for(var i=0;i<=arguments.length;i++){
          //       if(arguments[i]>num){
          //         num = arguments[i]
          //       }
          //   }
          //   return num
          // }
          // console.log(getMax(1,43,54,7,3,43,543,5324,888));
          // js的作用域 全局作用域 局部作用域 块级作用域
          // 全局作用域 作用域整个全局 整个sript标签
          // 局部作用域 作用域函数的内部 函数作用域
         
    },

    mvvm() {
      var obj = {
        age: 18
      };
      var com = "乔丹";
      Object.defineProperty(obj, "age", {
        get() {
          console.log("变化的值");
          return com;
        },
        set(newVal) {
          console.log("修改的值", newVal);
        }
      });
      console.log(obj.age, "1111");
      obj.age = "12";
      console.log(obj.age, "2222");
    }
  },
  mounted() {
    this.mvvm();
    //先给主元素加上初始位置 避免动画第一次不执行问题
    this.$refs.centerbox.style.left = -400 + 'px'
  }
};
</script>
<style scoped>
.box{
  position: relative;
  width: var(--width);
  height: var(--height);
  overflow: hidden;
}
.js{
  transition: all 1s;
  
  position: absolute;
  display: flex;
  width: var(--width)*5;
  height:var(--height) ;
  /* background-color: #b71515; */
}
.point{
  position: absolute;
  /* background-color: #c02998; */
  bottom: 20px;
  left: calc(50% - 50px);
  width: 60px;
  height: 20px;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.firstpoint{
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background-color: #1a0c0c;
  cursor: pointer;
} 
.active{
  background-color: #09935c;
}
.lunbo1{
  width: var(--width);
  height: var(--height);
  background-color: #9bb05f;
}  
.copelunbo1{
  width: var(--width);
  height: var(--height);
  background-color: #9bb05f;
}  
.lunbo2{
  width: var(--width);
  height: var(--height);
  background-color: #4db8c4;
}
.lunbo3{
  width: var(--width);
  height: var(--height);
  background-color: #6b337c;
} 
.copelunbo3{
  width: var(--width);
  height: var(--height);
  background-color: #6b337c;
} 
.rightpoint,.leftpoint{
  position: absolute;
  cursor: pointer;
  top: 50%;
  width: 30px;
  height: 30px;
  z-index: 3;
  font-size: 20px;
}
.leftpoint{
  left: 0;
}  
.rightpoint{
  right: 0;
}               
</style>